<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件的绑定</title>
        <script type="text/javascript">
            /* 点击按钮以后弹出一块内容 */
            window.onload = function(){
                var btn01 = document.getElementById("btn01");
                /****************************************************************
                //为btn01绑定第一个单击响应函数
                 btn01.onclick = function(){
                    alert("1");
                }; 
                //为btn01绑定第二个单击响应函数
                 btn01.onclick = function(){
                    alert("2");
                }; 
                使用 "对象.事件=函数" 的方式绑定响应函数时，它只能同时为
                一个元素的一个事件绑定一个响应函数，如果绑定多个，则后面
                的会覆盖掉前面的响应函数.

                ******************************************************************
                addEventListener()： （不支持IE8及以下）
                - 同时为同一元素的相同事件绑定多个响应函数，当事件被触发时，
                  响应函数将会按照函数的绑定顺序逐个执行；
                - 参数: 1.事件的字符串，不带on；
                        2.回调函数，当事件被触发时该函数会被调用；
                        3.是否在捕获阶段触发事件，需要一个布尔值，一般都是false；
                - this：该方法中的this是绑定事件的对象；


                attachEvent(): （支持IE8及以下）
                - 用法同上,不同的是该方法是后绑定的先执行，执行顺序与上者相反；
                - 参数：1.事件的字符串，带on； 2.回调函数； 
                - this：该方法的this是window；      
                ****************************************************************/
               btn01.addEventListener("click", function(){
                   alert(1);
               }, false);
               btn01.addEventListener("click", function(){
                   alert(2);
               }, false);
               btn01.addEventListener("click", function(){
                   alert(3);
               }, false);

               
               /****************************************************************
                解决绑定事件的响应函数兼容性问题：
                - 定义函数，为指定函数绑定响应函数：
                - 参数：1. obj：要绑定事件的对象；
                       2. eventStr: 事件的字符串(不带on)；
                       3.callback：回调函数；
               *****************************************************************/
               function bind(obj, eventStr, callback){
                    if(obj.addEventListener)
                    //大部分浏览器的兼容方式
                        return obj.addEventListener(eventStr, callback, false);
                    else
                        //IE8的兼容方式    
                    /* 在匿名函数中调用回调函数
                    (因为两种方法的this指向不同，而且callback函数是由浏览器调用的，
                    为了能够更改this的指向，这里让浏览器调用匿名函数，而在匿名函数中，
                    我们就可以操作调用回调函数了，从而改变this的指向) */
                        return obj.attachEvent("on"+eventStr, function(){
                            callback.call(obj);
                        });    
               }
            };
        </script>
        <style type="text/css">

        </style>
    </head>
    <body>
        <button id="btn01">点我一下</button>
    </body>
</html>